<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
	#tableUsers{
		margin:20px auto;
		padding: 0;
		width:400px;
	}
	#formAdd{
		margin:20px auto;
		padding: 0;
		width:400px;
		text-align: center;
	}
</style>
<body>
	<table id="tableUsers" border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>邮箱</th>
				<th>手机</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<form id="formAdd">
		<fieldset>
			<legend>添加</legend>
			<p>
				<input type="text" name="username" placeholder="username">
			</p>
			<p>
				<input type="number" name="age" placeholder="age">
			</p>
			<p>
				<input type="radio" name="sex" value="boy" checked> 男
				<input type="radio" name="sex" value="girl"> 女
			</p>
			<p>
				<input type="text" name="email" placeholder="email">
			</p>
			<p>
				<input type="text" name="phone" placeholder="phone">
			</p>
			<p>
				<input onclick="save()" type="button" value="保存">
			</p>
		</fieldset>
	</form>

	<script>
		var users = [
			{ id: 1, username: 'lucy', age: 20, sex: 'girl', email: 'lucy@qq.com', phone: '18013830888' },
			{ id: 2, username: 'lili', age: 21, sex: 'girl', email: 'lili@qq.com', phone: '18013830666' },
		]
		var tableUsers = document.getElementById('tableUsers')
		var tbody = tableUsers.querySelector('tbody')

		function showUsers() {
			var html = ''
			users.forEach(function (row) {
				html += `
			<tr>
				<td>`+ row.username + `</td>
				<td>`+ row.age + `</td>
				<td>`+ row.sex + `</td>
				<td>`+ row.email + `</td>
				<td>`+ row.phone + `</td>
				<td><button onclick="del(this)">删除</button></td>
			</tr>	`
			})
			tbody.innerHTML = html
		}
		showUsers()

		function del(el) {
			if (window.confirm('确定删除吗？')) {
				el.parentElement.parentElement.remove()
			}
		}
		
		var formAdd = document.getElementById('formAdd')

		function save(){
			var username = formAdd.username.value,
			age = formAdd.age.value,
			sex = formAdd.sex.value,
			email = formAdd.email.value,
			phone = formAdd.phone.value,
			html = `
			<tr>
				<td>`+ username + `</td>
				<td>`+ age + `</td>
				<td>`+ sex + `</td>
				<td>`+ email + `</td>
				<td>`+ phone + `</td>
				<td><button onclick="del(this)">删除</button></td>
			</tr>	`
			tbody.insertAdjacentHTML('beforeend',html)
		}
	</script>


</body>

</html>